<!-- 
  @name: 扫码加注
  @date: 2020.1.3
 -->
<template>
	<view class="content">
		<u-navbar
			title="加注"
			title-color="#ffffff"
			background="rbga(0,0,0,0)"
			:immersive="true"
			:back-icon-name="[!hasIndex ? 'home' : 'arrow-left']"
			:custom-back="goBack"
		></u-navbar>
		<view class="header-bg"></view>
		<!-- 欢迎语 -->
		<view class="welcome" :style="{ marginTop: topPos }">
			<view class="u-f-ac">
				<view class="icon"></view>
				<text style="font-size: 32rpx;">{{ info.siteName ? info.siteName : '----' }}欢迎您</text>
			</view>
			<view class="price">
				<text>供应品牌: {{ info.siteBrand ? info.siteBrand : '----' }}</text>
				<text style="margin-left: 50rpx;">单价: {{ info.ureaPrice ? info.ureaPrice : '----' }}元/{{ units }}</text>
			</view>
		</view>

		<!-- 支付区域 -->
		<view class="payment">
			<image :class="fillMode == 1 ? 'bg1' : 'bg2'" src="http://img.etubang.com/group1/M00/00/49/rBCky1_HJsWAa-HUAAATz4A4axQ170.png" mode="aspectFill"></image>

			<view class="content-box">
				<view class=" line-1">
					<view @tap="fillMode = 1" :class="[fillMode == 1 ? 'active' : '']">按金额输入</view>
					<view @tap="fillMode = 2" :class="[fillMode != 1 ? 'active' : '']">按计量输入</view>
				</view>
				<view class="u-f-jsb line-2">
					<view>
						<template v-if="fillMode == 1">
							<image  class="icon-money" src="http://img.etubang.com/group1/M00/00/49/rBCky1_HJuKAQ_eeAAAELGD27wU253.png" mode="aspectFill"></image>
							<input type="digit" maxlength="999" class="input" v-model="total" placeholder-style="font-size:40rpx;" @tap="fastVolume = false" />
						</template>
						<template v-else>
							<image  class="icon-kg" src="http://img.etubang.com/group1/M00/00/49/rBCky1_HJvWAZdjsAAAFGpYuLbw946.png" mode="aspectFill"></image>
							<input type="digit" maxlength="999" class="input" v-model="volume"  placeholder-style="font-size:40rpx;" @tap="fastVolume = false" />
						</template>
					</view>
					<view class="btn" @tap="$navigateTo('/pagesUc/chargeChannel/chargeChannel?operaId=' + info.operaId)">活动中心</view>
				</view>
				<view class="u-f-jsb line-3">
					<view>
						<view>
							<text>{{ fillMode == 1 ? '加注量' : '加注金额' }}</text>
							<text class="num">
								<text v-show="fillMode == 2">￥</text>
								{{ fillMode == 1 ? volume:total }}{{ fillMode == 1 ? units : '' }}
							</text>
						</view>
						<view class="tips">
							<image class="icon-warning" src="/static/wxImage/icon-warning.png" mode="aspectFill"></image>
							加注完成后若有余额会原路退回
						</view>
					</view>
					<view class="btn" @tap="paySubmit">立即支付</view>
				</view>
			</view>
		</view>

		<!-- 计量数组 -->
		<view class="fast-check" v-if="fillMode == 2">
			<view class="title">按计量快速加注</view>
			<view class="list">
				<view class="btn" v-for="(item, index) in volumeList" :key="index" @tap="changeVolume(item, index)">{{ item }}{{ units }}</view>
			</view>
		</view>

		<!-- 金额数组 -->
		<view class="fast-check" v-else>
			<view class="title">按金额快速加注</view>
			<view class="list">
				<view class="btn" v-for="(item, index) in amountList" :key="index" @tap="changeAmount(item, index)">{{ item.toFixed(2) }}</view>
			</view>
		</view>

		<!-- 质检报告 -->
		<!-- <view class="report u-f-ac" hover-class="gray" hover-start-time="100">
			<image class="icon-safe" src="/static/wxImage/icon-safe.png" mode="aspectFill"></image>
			<view style="margin-right: 40rpx;">当前批次尿素液检测报告</view>
			<u-icon name="arrow-right" color="rgba(56, 137, 255, 1)"></u-icon>
		</view> -->
		
		<!-- 活动banner 展示 -->
		
		<view class="banner-wrap">
			<u-swiper :list="swiperList" height="120" interval="4000" name="image" img-mode="widthFix" @click="jumpPage"></u-swiper>
		</view>
		
		<!-- 登录提示 -->
		<sign-in @submit="queryMacCode"></sign-in>

		<!-- 挂枪提示 -->
		<hold-gun ref="holdGun"></hold-gun>
	</view>
</template>

<script>
import holdGun from '@/components/popup/hold-gun.vue';
export default {
	components: { holdGun },
	data() {
		return {
			info: {
				ureaPrice:3
			}, //扫码后后端返回的信息
			ureaPrice: '3', //单价
			units: 'L', //计量单位
			total: '', //总金额
			volume: 0, //加注量
			macCode: '', //加注机器的机器码
			fastVolume: false, //是否使用容量快捷选择
			volumeList: [10, 20, 30, 40, 50, 60, 70, 80], //快速加注计量选择
			amountList: [30, 50, 60, 80, 100, 120, 150, 200], //快速加注金额选择
			hasIndex: true, // 是否有首页
			macStatus: false, //状态是否正常，true为正常
			fillMode: 1 ,// 1为金额加注模式  2为量加注模式
			swiperList:[
				{image:'http://www.tbuga.com/tubang_port/Public/Uploads/2020-11-23/5fbb17a1ab193.png',page:'/pagesUc/activePoster/fillCoupon'},
				{image:'http://www.tbuga.com/tubang_port/Public/Uploads/2020-11-23/5fbb17f4d0aa1.png',page:'/pagesUc/activePoster/friendCoupon'}
			]
		};
	},
	computed: {
		topPos() {
			return this.$systeminfo.statusBarHeight + 50 + 'px';
		}
	},
	watch: {
		//监听this.total变化
		total(val) {
			if (!this.fastVolume && this.fillMode==1) {
				if (parseFloat(val) > 0) {
					this.volume = this.$operation(val, '/', this.ureaPrice);
				} else {
					this.volume = 0;
				}
			}
		},
		volume(val) {
			if (!this.fastVolume && this.fillMode==2) {
				if (parseFloat(val) > 0) {
					this.total = this.$operation(val, '*', this.ureaPrice);
				} else {
					this.total = 0;
				}
			}
		},
		fillMode(val) {
			if(val == 1) {
				let tempVal = this.volume;
				this.total = tempVal;
				// this.volume = tempVal / this.ureaPrice;
				this.volume = this.$operation(tempVal,'/',this.ureaPrice);
			} else {
				let tempVal = this.total;
				this.volume = tempVal;
				// this.total = tempVal * this.info.ureaPrice;
				this.total = this.$operation(tempVal,'*',this.info.ureaPrice);
			}
		}
	},
	onLoad(e) {
		console.log(e);
		if (e.macCode || e.originalDeviceCode) {
			this.originalDeviceCode = e.macCode || e.originalDeviceCode;
			this.promoteCode = e.promoteCode || '';
		} else {
			// 普通二维码
			let url = decodeURIComponent(e.q);
			let idx = url.indexOf('?');
			// 解密参数
			let params = this.$decode(url.substr(idx + 1));
			// 序列化为json
			const obj = this.$urlTojson('?' + params);

			this.originalDeviceCode = obj.macCode;
			this.promoteCode = obj.promoteCode || '';
			console.log(obj);
		}
		this.hasIndex = this.$hasIndex();
		if (this.hasIndex) {
			this.queryMacCode();
		} else {
			uni.$on('loginSuc', this.queryMacCode);
		}
	},
	onUnload() {
		uni.$off('loginSuc');
	},
	methods: {
		play() {
			if(!this.audioContext){
				this.audioContext = uni.createInnerAudioContext();
				this.volume = 1;
			}
			let src = 'http://img.etubang.com/group1/M00/00/4C/rBCky2CHdW-AQ6zUAABgVFcVEUs264.mp3';
			this.audioContext.src = src;
			this.audioContext.play();
		},
		jumpPage(idx) {
			console.log(this.swiperList[idx].page);
			this.$navigateTo(this.swiperList[idx].page);
		},
		goBack() {
			if (this.hasIndex) {
				uni.navigateBack();
			} else {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}
		},
		// 查询二维码编号
		queryMacCode() {
			console.log('queryMacCode', this.macCode);
			this.$http({
				url: this.$api.siteUrl + 'getmaccodebyoriginaldevicecode',
				data: {
					originalDeviceCode: this.originalDeviceCode
				}
			}).then(res => {
				this.macCode = res.macCode;
				if (this.macCode) {
					this.getInfo();
				}
			});
		},
		//确认支付，跳转到支付操作页面
		async paySubmit() {
			if (!this.$store.state.token) {
				this.$store.commit('showLogin', true);
				return;
			}
			if (!this.macStatus) {
				this.$showToast('加注机状态异常，请重新扫码！');
				return;
			}
			if (!this.volume || parseFloat(this.total) <= 0 || !this.$u.test.amount(this.total)) {
				this.$showToast('请输入正确的加注金额！');
				return;
			}
			
			let data = {
				moneyAmount: this.$operation(this.total, '+', 0),
				recordNum: this.volume,
				macCode: this.macCode,
				operaId: this.info.operaId,
				siteId: this.info.siteId,
				promoteCode: this.promoteCode
			};
			
			this.$store.commit('setTmpData', JSON.stringify(data));
			this.$navigateTo('./pay');
		},
		//点击金额
		changeAmount(item, index) {
			this.fastVolume = false;
			this.total = item;
		},
		//点击容量
		changeVolume(item, index) {
			this.fastVolume = true;
			this.volume = item;
			this.total = (this.ureaPrice * item).toFixed(2);
		},
		//扫码后获得信息
		getInfo() {
			this.$http({
				url: this.$api.siteUrl + 'getfillmachinedetail',
				data: {
					macCode: this.macCode
				}
			}).then(res => {
				/*
				* 加注机离线限制加注
				*/
				if (res.macStatus === 2 && res.devicestatus==='ONLINE') {
					this.info = res;
					this.macStatus = true;
					this.ureaPrice = res.ureaPrice;
					this.units = this.info.units === 0 ? 'L' : 'kg';
					// 挂枪提示
					if (res.gunstatus && res.gunstatus === 1) {
						this.$refs.holdGun.open();
						this.play();
					} 
				} else {
					let content = res.macStatus != 2 ?'该加注机已关闭，请重新换一台机器扫码。':'该设备正在维护中，请重新换一台机器扫码';
					uni.showModal({
						content: content,
						showCancel: false,
						success: rs => {
							if (rs.confirm) {
								if (this.hasIndex) {
									uni.navigateBack({
										delta: 1
									});
								} else {
									uni.reLaunch({
										url: '/pages/index/index'
									});
								}
							}
						}
					});
				}
			});
		},
		
	}
};
</script>

<style lang="scss">
.header-bg {
	position: absolute;
	// top: 160rpx;
	width: 100vw;
	height: 800rpx;
	background: linear-gradient(180deg, #2eba6a, #2eba6a, #f5f5f9);
	z-index: -1;
}
/* 欢迎语 */
.welcome {
	width: 750rpx;
	padding: 25rpx 28rpx;
	font-size: 28rpx;
	view {
		color: #ffffff;
	}
	.icon {
		width: 27rpx;
		height: 35rpx;
		margin-right: 17rpx;
		background-image: url(../../static/wxImage/location2.png);
	}
	.price {
		margin-left: 40rpx;
		font-size: 28rpx;
		margin-top: 35rpx;
	}
}

/* 支付区域 */
.payment {
	width: 710rpx;
	height: 425rpx;
	padding: 30rpx;
	margin: 20rpx;
	position: relative;
	.bg1,
	.bg2 {
		width: 710rpx;
		height: 425rpx;
		position: absolute;
		top: 0;
		left: 0;
		// transition: all 0.1s;
	}
	.bg2 {
		transform: rotateY(180deg);
	}

	.content-box {
		position: absolute;
		top: 0;
		left: 0;
		width: 710rpx;
		height: 425rpx;

		.line-1 {
			display: flex;
			line-height: 120rpx;
			font-size: 32rpx;

			> view {
				flex: 1;
				text-align: center;
				color: #ffffff;
			}
			.active {
				color: #333333;
				font-size: 36rpx;
			}
		}

		.line-2 {
			margin-top: 30rpx;
			padding: 0 36rpx;
			> view {
				color: #2eba6a;
				font-weight: bold;
				font-size: 80rpx;
			}
			> view:nth-child(1) {
				width: 360rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #cccccc;
			}
			.input {
				padding-bottom: 10rpx;
				text-align: center;
				height: 100rpx;
				font-size: 85rpx;
			}
			.icon-money {
				width: 40rpx;
				height: 55rpx;
				flex-shrink: 0;
			}
			.icon-kg {
				width: 48rpx;
				height: 52rpx;
				flex-shrink: 0;
			}
			.text {
				text-align: center;
				flex: 1;
				overflow: hidden;
			}
			.btn {
				font-size: 32rpx;
				color: #2eba6a;
				width: 220rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 15rpx;
				border: 1rpx solid #2eba6a;
				font-weight: 600;
			}
		}

		.line-3 {
			padding: 0 36rpx;
			height: 150rpx;

			> view:nth-child(1) {
				font-size: 28rpx;
				color: #333333;
			}

			.btn {
				font-size: 32rpx;
				color: #ffffff;
				width: 220rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 15rpx;
				border: 1rpx solid #2eba6a;
				font-weight: 600;
				background-color: #2eba6a;
			}

			.num {
				font-size: 30rpx;
				font-weight: 600;
				color: #2eba6a;
				margin-left: 30rpx;
			}

			.tips {
				background-color: #f5f5f5;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				padding: 15rpx;
				font-size: 22rpx;
				margin-top: 25rpx;
				color: #333333;

				.icon-warning {
					width: 25rpx;
					height: 25rpx;
					margin-right: 12rpx;
				}
			}
		}
	}

	/* 输入金额 */
	.amount {
		width: 100%;
		margin-top: 30rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: row;
		background-color: $color-bg;
		border-radius: $border-radius-bm;
		.num {
			flex: 1;
			.title {
				color: #808080;
			}
			.entry {
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				width: 305rpx;
				padding-top: 35rpx;
				padding-bottom: 15rpx;
				border-bottom: 1rpx solid $color-grey-light;
				.icon {
					font-size: 32rpx;
					font-weight: bold;
				}
				.input {
					flex: 1;
					height: 56rpx;
					font-size: 56rpx;
					margin-left: 20rpx;
					font-weight: $font-weight;
					font-family: $font-family-num;
				}
			}
			.text {
				margin-top: 26rpx;
				color: #808080;
			}
		}
		.play {
			width: 166rpx;
			.btn1,
			.btn2 {
				width: 100%;
				height: 68rpx;
				line-height: 68rpx;
				text-align: center;
				font-size: 32rpx;
				border-radius: $border-radius-bm;
			}
			.btn1 {
				margin-top: 20rpx;
				color: $color-primary;
				border: 2rpx solid $color-primary;
			}
			.btn2 {
				margin-top: 36rpx;
				color: $color-white;
				background: $color-primary;
			}
		}
	}
}

.report {
	margin: 30rpx;
	background-color: #ffffff;
	border-radius: 20rpx;

	height: 110rpx;
	padding-left: 50rpx;
	> view {
		color: rgba(56, 137, 255, 1);
	}
	.icon-safe {
		width: 38rpx;
		height: 41rpx;
		flex-shrink: 0;
		margin-right: 28rpx;
	}
}

/* 计量数组 */
.fast-check {
	padding: 30rpx 15rpx;
	background-color: $color-white;
	margin: 10rpx;
	border-radius: 20rpx;
	.title {
		margin-left: 15rpx;
		margin-bottom: 20rpx;
	}
	.list {
		width: 100%;
	}
	.btn {
		display: inline-block;
		width: 150rpx;
		height: 91.1rpx;
		line-height: 91.1rpx;
		margin: 15rpx 13.5rpx;
		text-align: center;
		font-weight: bold;
		font-size: 36rpx;
		color: #2eba6a;
		font-family: $font-family-num;
		background-color: rgba(46, 186, 106, 0.1);
		border-radius: $border-radius-bm;
	}
}

.banner-wrap {
	height: 120rpx;
	margin-top: 60rpx;
	padding: 0 30rpx;
	image {
		width: 710rpx;
		margin-bottom: 6rpx;
	}
}

/* 提示 */
.tip_submit {
	margin: 50rpx 0;
}
</style>
